<template>
 <div>
    <div class="com_bg">
        <div class="com_mai">       
            <div class="com_head_bg">
                <h3 class="com_head">用户评论</h3>
            </div>              
        </div>
        <div>
            <div class="com_mai" v-for="item in list" :key="item.id">
                <div class="com_yonghu">
                    <div class="com_yonhu_head">
                        <span class="star">{{item.start}}</span>    
                         <span class="com_time">{{item.comtime}}</span>
                         <span class="com_use">{{item.comuse}}</span>
                    </div>
                    <div class="com_liuyan">
                        <p>{{item.comment}}</p>
                    </div>                    
                    <div class="com_act" @click="comactive($event)" v-if="item.comheight">
                        <span class="fa fa-angle-down"></span>
                    </div> 
                    <div @click="handleBannerClick()">
                        <div class="com_img_bg">
                            <div class="com_img">
                                <div class="com_fix" v-for="comli in item.commentimgs" :key="comli.index">
                                    <div class="com_img_box">
                                        <img :src="comli">
                                    </div>  
                                </div>
                            </div>                     
                        </div> 
                        <div class="com_img_bg combox">
                            <div class="com_img com_ss">
                                <div class="com_fix" v-for="comli1 in item.commentimgs1" :key="comli1.index">
                                    <div class="com_img_box">
                                        <img :src="comli1">
                                    </div>  
                                </div>
                            </div>                     
                        </div>
                    </div>                    
                    <div class="com_span" v-if="item.ifcount">
                        <span>共{{item.count}}张</span>
                    </div>          
                </div>        
            </div>     
        </div>                
     </div>   
     <common-gallary :imgs="comshowImgs" v-show="showGallary" @close="handleGallaryClick"></common-gallary>
</div>
</template>

<script>
import CommonGallary from 'common/gallary/Gallary'
export default {
  name: "comment",
  props: {
      list:Array,
      imgs:Array,
      imgs1:Array,
      comshowImgs:Array,
     
  },
   components: {
        CommonGallary
  },
  data() {
    return {
      flag: true,
      showGallary:false,     
    };
  },
  methods: {
    comactive(event) {
      var b = this.flag;
      if (b == true) {
        var c = event.currentTarget;
        var a = c.parentNode.children[1].children[0];
        // console.log(a);
        a.style.height = "auto";
        c.innerHTML = "<span class='fa fa-angle-up'></span>";
        this.flag = false;
      } else {
        var c = event.currentTarget;
        var a = c.parentNode.children[1].children[0];
        c.innerHTML = "<span class='fa fa-angle-down'></span>";
        a.style.height = "70px";
        this.flag = true;
      }
    },
    handleBannerClick(){
        this.showGallary=true       
    },
    handleGallaryClick(){
        this.showGallary=false
    },  
     alerts(){         
        
     }   
  },
   created () {
        
   }
};
</script>

<style lang="stylus" scoped>
.com_head {
    padding: 0 0.1rem;
    height: 0.88rem;
    background: #fff;
    color: #333;
    font-size: 0.3rem;
    line-height: 0.88rem;
    text-indent: 0.2rem;
    border-bottom: 1px solid rgba(17, 34, 17, 0.2);
}
.com_bg {
    background: #e9f3f5;
    padding-top: 5px;
    clear: both;
    position: relative;
}
.com_head_bg {
    background: #fff;
}
.com_head::after {
    content: ' ';
    position: absolute;
    top: 0.43rem;
    left: 0.3rem;
    width: 0.06rem;
    height: 0.25rem;
    background: #1ba9ba;
}
.com_mai {
    background: white;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
}
.com_yonhu_head {
    height: 0.7rem;
    line-height: 0.7rem;
    padding-top: 0.2rem;
   
}
.com_fix{
    width 34%
}
.star {
    color: #ffb436;
    float: left;
}
.com_use {
    margin-right: 0.1rem;
}
.com_yonghu{
    position relative
}

.com_liuyan p {
    text-indent: 32px;
    text-align: justify;
    height: 70px;
    overflow: hidden;
    line-height: 0.35rem;
}

.com_act {
    display: block;
    text-align: center;
    height: 0.7rem;
    line-height: 0.7rem;
    font-size: 0.5rem;
}

.com_img_box {
    float: left;    
    margin: 0.05rem;
   
}
.com_use,.com_time{
    float right 
}

.com_img_box img {
    width: 100%;
}

.com_img {
    overflow: hidden;
    width: 97%;
    margin: 0 auto;
    background: #fff;
   
   
    display flex
}
.combox{
 border-bottom: 1px dashed rgba(17, 34, 17, 0.2);
}

.com_img_bg {
    background: #fff;
}
.com_ss{
    padding-bottom 0.4rem
}
.com_span{
    position:absolute;    
    float: right;
    color: white;
    background: black;
    border-radius: 10px;
    display: block;
    width: 1rem;
    height: 0.4rem;
    text-align: center;
    line-height: 0.4rem;
    font-size: 0.1rem;
    right: 0.2rem;
    bottom: 0.7rem;
}
// .com_use{
//     position relative
//     left: 4rem;
// }
// .com_time{
//     position relative
//     left: 3.9rem;
// }
</style>
